<template>
  <div>
  <baidu-map @ready="loadedMap"  style="height: 500px;width: 100%"
             :zoom="zoom"   :center="mapCenter" :scroll-wheel-zoom="true">
    <bm-polyline :path="points" stroke-color="green" :stroke-opacity="1" :stroke-weight="4" ></bm-polyline>
  </baidu-map>
  </div>
</template>

<script>
  import { listTrail} from "@/api/hps/trail";
  import {BmlCurveLine} from 'vue-baidu-map';
  export default {
    name: "trailMapInfo",
    components: {
      BmlCurveLine
    },
    props:{
      value:{
        type:Number
      },
      lng:{
        type:String
      },
      lat:{
        type:String
      }
    },
    data () {
      return {
        play: true,
        path: [],
        //报名人员轨迹列表
        traiMaplnfoList:[],
        icon: {
          url: require('@/assets/trail/point.png'),
          size: {width: 52, height: 52},
          opts: {anchor: {width: 13, height:13}}
        },
        // 地图坐标解析器
        gc: '',
        // 地图
        map: '',
        // 地图中心点
        mapCenter: {},
        // 地图缩放
        zoom: 15,
        // 标注点的坐标信息
        pointMarker: {},
        // 点信息
        pointInfo: {},
        queryParams: {
          enrollId: undefined
        },
        // 总条数
        points: [],
        icons: [],
        //定时任务
        intervalId:null

      }
    },

    created() {
      this.queryParams.enrollId=this.value;
      //只执行一次获取数据
      this.getList2();
      //每5秒执行获取数据
      this.getList();

    },

    methods: {
      reset () {
        this.play = false
      },
      update (e) {
        this.points = e.target.cornerPoints
      },
      getList() {
        this.loading = true;
        // 计时器正在进行中，退出函数
        if (this.intervalId != null) {
          return;
        }
        this.intervalId = setInterval(() => {
          console.log("每5秒获取一次最新运动员位置")
          listTrail(this.queryParams).then(response => {
            // this.traiMaplnfoList=response.rows;

            var data = [];
            response.rows.filter(e=>{
              var list={
                lng:e.lng,
                lat:e.lat
              }
              data.push(list)
            })
            this.points=data;
            // console.log(this.points)
            this.loading =false;
          });
        },5000);

      },

      getList2() {
        this.loading = true;
          listTrail(this.queryParams).then(response => {
            // this.traiMaplnfoList=response.rows;

            var data = [];
            response.rows.filter(e=>{
              var list={
                lng:e.lng,
                lat:e.lat
              }
              data.push(list)
            })
            this.points=data;
            // console.log(this.points)
            this.loading =false;
          });
      },

      loadedMap({BMap, map}) {
        this.path.lng=this.lng;
        this.path.lat=this.lat;
        console.log(this.path);
        //创建地址解析器实例
        this.gc = new BMap.Geocoder();
        this.map = map;

        if (this.path.lat && this.path.lng) {
          this.mapCenter = this.path
          this.addMarker(this.path)
          this.pointInfo.location = this.path
        } else {
          this.mapCenter = "江西"
        }

      },

      // 添加标注——跳动的点
      addMarker(point) {
        this.pointMarker = point
      },
      // 设置地图缩放级别
      setZoom(zoom) {
        this.zoom = zoom
      },

    }

  }
</script>

